<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yoursite.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"flat"},"back2top":{"enable":true,"sidebar":true,"scrollpercent":true},"bookmark":{"enable":true,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="#UI框架 动效 学习 二〇二〇年五月三十一日  2019最受欢迎的前端7个UI框架 - 知乎https:&#x2F;&#x2F;zhuanlan.zhihu.com&#x2F;p&#x2F;61403630 2019年最流行的10个前端框架，设计师快来收藏！ | 优设网 - UISDChttps:&#x2F;&#x2F;www.uisdc.com&#x2F;2019-10-front-frame 前端动效库汇总 CSS 动画的基础知识  transition +">
<meta property="og:type" content="article">
<meta property="og:title" content="前端&#x2F;UI&#x2F;UI框架">
<meta property="og:url" content="http://yoursite.com/2020/06/25/%E5%89%8D%E7%AB%AF/UI/UI%E6%A1%86%E6%9E%B6/index.html">
<meta property="og:site_name" content="heweiliang blog">
<meta property="og:description" content="#UI框架 动效 学习 二〇二〇年五月三十一日  2019最受欢迎的前端7个UI框架 - 知乎https:&#x2F;&#x2F;zhuanlan.zhihu.com&#x2F;p&#x2F;61403630 2019年最流行的10个前端框架，设计师快来收藏！ | 优设网 - UISDChttps:&#x2F;&#x2F;www.uisdc.com&#x2F;2019-10-front-frame 前端动效库汇总 CSS 动画的基础知识  transition +">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://i.loli.net/2020/05/30/gxfwrANW62sQa5l.jpg">
<meta property="og:image" content="http://yoursite.com/2020/06/25/%E5%89%8D%E7%AB%AF/UI/UI%E6%A1%86%E6%9E%B6/%E5%9B%BE%E7%89%87%E9%93%BE%E6%8E%A5">
<meta property="og:image" content="https://img.shields.io/badge/language-swift-brightgreen.svg?style=plastic">
<meta property="og:image" content="https://img.shields.io/badge/Stack_Overflow-10k+-red.svg?style=float-square&logo=stackoverflow">
<meta property="og:image" content="https://img.shields.io/badge/download-1K-brightgreen.svg">
<meta property="og:image" content="https://img.shields.io/badge/npm-v3.2.0-blue.svg?style=flat-square">
<meta property="og:image" content="https://img.shields.io/badge/npm-v3.2.0-blue.svg?style=flat-square">
<meta property="article:published_time" content="2020-06-25T04:56:44.332Z">
<meta property="article:modified_time" content="2020-06-26T06:02:10.534Z">
<meta property="article:author" content="heweiliang">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://i.loli.net/2020/05/30/gxfwrANW62sQa5l.jpg">

<link rel="canonical" href="http://yoursite.com/2020/06/25/%E5%89%8D%E7%AB%AF/UI/UI%E6%A1%86%E6%9E%B6/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>前端/UI/UI框架 | heweiliang blog</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="heweiliang blog" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">heweiliang blog</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-fw fa-user"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档</a>

  </li>
        <li class="menu-item menu-item-schedule">

    <a href="/schedule/" rel="section"><i class="fa fa-fw fa-calendar"></i>日程表</a>

  </li>
        <li class="menu-item menu-item-sitemap">

    <a href="/sitemap.xml" rel="section"><i class="fa fa-fw fa-sitemap"></i>站点地图</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

  <a href="https://github.com/yourname" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/06/25/%E5%89%8D%E7%AB%AF/UI/UI%E6%A1%86%E6%9E%B6/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="heweiliang">
      <meta itemprop="description" content="heweiliang blog">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="heweiliang blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          前端/UI/UI框架<a href="https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name_posts/%E5%89%8D%E7%AB%AF/UI/UI%E6%A1%86%E6%9E%B6.md" class="post-edit-link" title="编辑" rel="noopener" target="_blank"><i class="fa fa-pencil"></i></a>
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-06-25 12:56:44" itemprop="dateCreated datePublished" datetime="2020-06-25T12:56:44+08:00">2020-06-25</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-06-26 14:02:10" itemprop="dateModified" datetime="2020-06-26T14:02:10+08:00">2020-06-26</time>
              </span>

          
            <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span><br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>10k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>9 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <p>#UI框架 动效 学习</p>
<p>二〇二〇年五月三十一日</p>
<p><img src="https://i.loli.net/2020/05/30/gxfwrANW62sQa5l.jpg" alt="1 (C:%5CUsers%5CAdministrator%5CPictures%5C%E5%A3%81%E7%BA%B8%5C1%20(6).jpg)"></p>
<p>2019最受欢迎的前端7个UI框架 - 知乎<br><a href="https://zhuanlan.zhihu.com/p/61403630" target="_blank" rel="noopener">https://zhuanlan.zhihu.com/p/61403630</a></p>
<p>2019年最流行的10个前端框架，设计师快来收藏！ | 优设网 - UISDC<br><a href="https://www.uisdc.com/2019-10-front-frame" target="_blank" rel="noopener">https://www.uisdc.com/2019-10-front-frame</a></p>
<p><a href="https://juejin.im/post/5cc089eae51d456e7d189f9d#heading-32" target="_blank" rel="noopener">前端动效库汇总</a></p>
<h2 id="CSS-动画的基础知识-transition-transform-animation"><a href="#CSS-动画的基础知识-transition-transform-animation" class="headerlink" title="CSS 动画的基础知识  transition + transform + animation"></a>CSS 动画的基础知识  transition + transform + animation</h2><p><a href="https://juejin.im/post/5a424a796fb9a045023be66c" target="_blank" rel="noopener">CSS3的动画属性 - 掘金</a></p>
<p><a href="https://aotu.io/notes/2016/05/06/CSS3-3D-Animation/" target="_blank" rel="noopener">CSS3动画之3D动画 | Aotu.io「凹凸实验室」</a></p>
<blockquote>
<p>transition  n. 过渡；转变</p>
<p>property 属性</p>
<p>duration n. 持续，持续的时间，期间；音长，音延</p>
<p>timing-function 时间函数</p>
<p>delay v 延期；（使）耽搁；推迟 n. 延迟的时间；延期；延时；延迟器</p>
</blockquote>
<h3 id="transition-首尾两个状态-两个帧"><a href="#transition-首尾两个状态-两个帧" class="headerlink" title="transition 首尾两个状态 两个帧"></a>transition 首尾两个状态 两个帧</h3><p>允许css的属性值在一定的时间区间内平滑地<strong>过渡</strong>。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。</p>
<p>不是所有的CSS属性都支持<code>transition</code>，transition元素支持的属性</p>
<p><code>transition</code>需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。</p>
<p><a href="http://leaverou.github.io/animatable/" target="_blank" rel="noopener">Animatable: One property, two values, endless possibilities</a></p>
<blockquote>
<p>transition ：transition-property || transition-duration || transition-timing-function || transition-delay;</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">transition</span>: <span class="selector-tag">all</span> 1<span class="selector-tag">s</span> <span class="selector-tag">ease</span> 0<span class="selector-tag">s</span>; </span><br><span class="line">属性 时间 函数 变换延迟时间</span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>值</th>
<th>参数</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>transition-property</td>
<td>none || all || property</td>
<td>变换的属性</td>
</tr>
<tr>
<td>transition-duration</td>
<td>time</td>
<td>元素 转换过程的持续时间time为数值，单位为s（秒）或者ms(毫秒)，其默认值是0</td>
</tr>
<tr>
<td>transition-timing-function</td>
<td>linear || ease || ease-in || ease-in-out || cubic-bezier(n,n,n,n)</td>
<td>在延续时间段，变换的速率变化</td>
</tr>
<tr>
<td>transition-delay</td>
<td>time</td>
<td>变换延迟时间</td>
</tr>
</tbody></table>
<table>
<thead>
<tr>
<th>值</th>
<th>描述 Description</th>
</tr>
</thead>
<tbody><tr>
<td>linear</td>
<td>规定以<code>相同速度</code>开始至结束的过渡效果。</td>
</tr>
<tr>
<td>ease</td>
<td>规定<code>慢速开始，然后变快</code>，然后慢速结束的过渡效果。</td>
</tr>
<tr>
<td>ease-in</td>
<td>规定以慢速开始的过渡效果。</td>
</tr>
<tr>
<td>ease-out</td>
<td>规定以慢速结束的过渡效果。</td>
</tr>
<tr>
<td>ease-in-out</td>
<td>规定以慢速开始和结束的过渡效果。</td>
</tr>
<tr>
<td>cubic-bezier(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)</td>
<td>在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。</td>
</tr>
</tbody></table>
<blockquote>
<p>transition-timing-function: </p>
<p>linear  相同速度</p>
<p>ease || ease-in || ease-out || ease-in-out 慢速开始，然后变快 || 慢速开始 || 慢速结束 || 慢速开始和结束</p>
<p>cubic-bezier(n,n,n,n)</p>
</blockquote>
<p>重点hover transition 时，属性应该是写在 没有:hover 的元素中</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 开始帧</span><br><span class="line">#box&#123;</span><br><span class="line"></span><br><span class="line"> transition属性的位置</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 结束帧</span><br><span class="line">#box:hover&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="transform"><a href="#transform" class="headerlink" title="transform"></a>transform</h3><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">transform:none || transform-functions</span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>值</th>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>none</td>
<td>无</td>
<td>没有</td>
</tr>
<tr>
<td>translate 移动</td>
<td>translate(x,y) 2D转换，translate3d(x,y,z) 3D转换，translateX(x) 定义转换，只是用X轴，translateY(y) Y轴 ， translateZ(z) Z 轴</td>
<td>移动</td>
</tr>
<tr>
<td>rotate 旋转</td>
<td>rotate(angle) 2D旋转， rotate3d(angle) 3D 旋转， rotateX(angle) X轴的3D旋转，rotateY(angle) Y轴的3D旋转， rotateZ(angle) Z轴的3D旋转</td>
<td>旋转</td>
</tr>
<tr>
<td>scale 缩放</td>
<td>scale(x,y) 2D缩放 scale3d(x,y,z) 3D缩放 scaleX(x) X轴缩放 scaleY(y) y轴缩放 scaleZ(z) z轴缩放</td>
<td>缩放</td>
</tr>
<tr>
<td>skew 扭曲</td>
<td>shew(x-angle,y-angle)定义X和Y轴的2D倾斜转换，skewX(angle)定义X轴的2D倾斜转换，skewY(angle) 定义Y轴的2D倾斜转换</td>
<td>扭曲</td>
</tr>
<tr>
<td>transform-origin</td>
<td>transform-origin:X || Y || Z X，Y，Z对应三维坐标</td>
<td>元素的中心点</td>
</tr>
<tr>
<td>matrix 矩阵变形</td>
<td></td>
<td>矩阵变形</td>
</tr>
</tbody></table>
<blockquote>
<p>transform: translate() rotate() skew() scale();</p>
<p>translate() 、scale()、rotate()   <code>(x,y)  3d(x,y,z) X(x) Y(y) Z(z)</code> 5个</p>
<p>skew()<code>(x angle,y angle)、X(angle)、Y(angle)</code> 3个</p>
<p>transform-origin: X Y Z;</p>
<p>单位</p>
<p>translate() px</p>
<p>rotate() deg  rotate 是 2D 其余都是3D的</p>
<p>scale() 放大的倍数</p>
<p>skew() deg</p>
<p>注意</p>
<p>skew 的本质就是拉动X轴或者X轴</p>
<p> transform: scale(1.5, 1.5);</p>
<p> transform: translate3d(100px, 100px, 0px);</p>
<p>只会执行后面的属性</p>
</blockquote>
<h3 id="animation-定义任意多的关-键帧-keyframe"><a href="#animation-定义任意多的关-键帧-keyframe" class="headerlink" title="animation 定义任意多的关 键帧 + @keyframe"></a>animation 定义任意多的关 键帧 + @keyframe</h3><p>animation</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">animation: animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction</span><br><span class="line"><span class="selector-tag">animation</span>: <span class="selector-tag">mykeframe</span> 3<span class="selector-tag">s</span> <span class="selector-tag">ease</span> 3<span class="selector-tag">s</span> <span class="selector-tag">infinite</span> <span class="selector-tag">normal</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>值</th>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>animation-name</td>
<td></td>
<td>选择器的keyframe名称</td>
</tr>
<tr>
<td>animation-duration</td>
<td></td>
<td>动画花费的时间</td>
</tr>
<tr>
<td>animation-timing-function</td>
<td></td>
<td>动画的速度曲线</td>
</tr>
<tr>
<td>animation-delay</td>
<td></td>
<td>延迟时间</td>
</tr>
<tr>
<td>animation-iteration-count</td>
<td>n || infinite(无限次)</td>
<td>播放次数</td>
</tr>
<tr>
<td>animation-direction</td>
<td>normal reverse alternate alternate-reverse initial inherit;</td>
<td>规定是否应该轮流反向播放动画，默认值是正向</td>
</tr>
<tr>
<td>animation-fill-mode</td>
<td>animation-fill-mode: none|| backwards || both</td>
<td>规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。</td>
</tr>
<tr>
<td>animation-play-state</td>
<td>animation-play-state:running||paused</td>
<td>指定动画是否正在运行或已暂停。</td>
</tr>
</tbody></table>
<p>keyframe</p>
<p><code>@keyframes</code> 让开发者通过指定动画中特定时间点必须展现的关键帧样式（或者说停留点）来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理。</p>
<p>要使用关键帧, 先创建一个带名称的<code>@keyframes</code>规则，以便后续使用 <code>animation-name</code>这个属性来调用指定的<code>@keyframes</code>. 每个<code>@keyframes</code> 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。</p>
<p>关键帧的编写顺序没有要求，最后只会根据百分比按由小到大的顺序触发。</p>
<table>
<thead>
<tr>
<th>值</th>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>animationname</td>
<td></td>
<td>必需。定义动画的名称。</td>
</tr>
<tr>
<td>keyframes-selector</td>
<td></td>
<td>必需。动画时长的百分比。合法的值：0-100%from（与 0% 相同）to（与 100% 相同）</td>
</tr>
<tr>
<td>css-style</td>
<td></td>
<td>必需。一个或多个合法的 CSS 样式属性。</td>
</tr>
</tbody></table>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">@keyframes animationname &#123;keyframes-selector &#123;css-styles;&#125;&#125;</span><br><span class="line">@keyframs ky&#123;</span><br><span class="line">  0% &#123; top: 0; left: 0px&#125;</span><br><span class="line">  50% &#123; top: 30px; left: 20px; &#125;</span><br><span class="line">  100% &#123; top: 0; left: 30px;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>JavaScript动画</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>JQuery 动画</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(selector).animate(&#123;params&#125;,speed,callback);</span><br></pre></td></tr></table></figure>



<h2 id="GitHub的README-md的svg图标"><a href="#GitHub的README-md的svg图标" class="headerlink" title="GitHub的README.md的svg图标"></a>GitHub的README.md的svg图标</h2><ul>
<li><a href="https://shields.io/#/" target="_blank" rel="noopener">svg图标官网说明https://shields.io</a></li>
<li><a href="https://blog.csdn.net/yangbodong22011/article/details/51791085" target="_blank" rel="noopener">GitHub上 README 增加图片标签</a></li>
<li><a href="https://simpleicons.org/" target="_blank" rel="noopener">简单图标库</a></li>
</ul>
<p>自动生成的方法</p>
<p><a href="https://shields.io/" target="_blank" rel="noopener">Shields.io: Quality metadata badges for open source projects</a></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">前往网址</span><br><span class="line">Your Badge</span><br><span class="line">Static</span><br><span class="line">	</span><br><span class="line">Dynamic 动态</span><br></pre></td></tr></table></figure>



<blockquote>
<p><code>https://img.shields.io/badge/&lt;图标前部分的文字&gt;-&lt;图标后部分的文字&gt;-&lt;颜色&gt;.svg</code><br><code>https://img.shields.io/static/v1?label=&lt;LABEL&gt;&amp;message=&lt;MESSAGE&gt;&amp;color=&lt;COLOR&gt;</code><br>注意点：<br>1、因为-是会用到的分割字符，如果文字中有-，如要用–来代替，如Objective-C要写成Objective–C<br>2、颜色可以是支持的英文，也可以是6位的16进制的字符串，如blue、0000ff<br>3、可以支持圆角、矩形样式、社交样式、还可以添加logo<br>    MarkDown语法显示图片:  <img src="%E5%9B%BE%E7%89%87%E9%93%BE%E6%8E%A5" alt="图片描述"></p>
<p><code>![](https://img.shields.io/badge/download-1K-brightgreen.svg)</code></p>
</blockquote>
<p><img src="https://img.shields.io/badge/language-swift-brightgreen.svg?style=plastic" alt="瘦小的圆角矩形"></p>
<p><img src="https://img.shields.io/badge/Stack_Overflow-10k+-red.svg?style=float-square&logo=stackoverflow" alt="社交样式"></p>
<p><img src="https://img.shields.io/badge/download-1K-brightgreen.svg" alt=""></p>
<p><img src="https://img.shields.io/badge/npm-v3.2.0-blue.svg?style=flat-square" alt="">)<img src="https://img.shields.io/badge/npm-v3.2.0-blue.svg?style=flat-square" alt=""></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">![瘦小的圆角矩形](https:&#x2F;&#x2F;img.shields.io&#x2F;badge&#x2F;language-swift-brightgreen.svg?style&#x3D;plastic)</span><br><span class="line">language-swift-brightgreen</span><br><span class="line">https:&#x2F;&#x2F;img.shields.io&#x2F;badge&#x2F;&lt;图标前部分的文字&gt;-&lt;图标后部分的文字&gt;-&lt;颜色&gt;.svg</span><br><span class="line">style&#x3D;plastic 瘦小的圆角矩形</span><br><span class="line">style&#x3D;flat-square 正常大小的矩形</span><br><span class="line">style&#x3D;social 社交样式</span><br><span class="line">style&#x3D;social&amp;logo&#x3D;github 带logo</span><br></pre></td></tr></table></figure>



<h2 id="Animate-css"><a href="#Animate-css" class="headerlink" title="Animate.css"></a>Animate.css</h2><ul>
<li>56401 ★</li>
<li>一个跨浏览器的动效基础库，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效，一应俱全。</li>
<li>文件大小：55.2 kB.</li>
</ul>
<p><a href="https://www.dowebok.com/demo/2014/98/" target="_blank" rel="noopener">animate.css</a></p>
<p><a href="https://github.com/animate-css/animate.css" target="_blank" rel="noopener">animate-css/animate.css: 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.</a></p>
<h3 id="安装教程"><a href="#安装教程" class="headerlink" title="安装教程"></a>安装教程</h3><h4 id="CDN"><a href="#CDN" class="headerlink" title="CDN"></a>CDN</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="Installation"><a href="#Installation" class="headerlink" title="Installation"></a>Installation</h4><p>Install with npm:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install animate.css --save</span><br></pre></td></tr></table></figure>

<p>Install with yarn:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add animate.css</span><br></pre></td></tr></table></figure>

<p>使用教程</p>
<p>添加类名</p>
<p><a href="https://www.dowebok.com/demo/2014/98/" target="_blank" rel="noopener">animate.css动画演示_dowebok</a></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">3.7.2</span><br><span class="line">   &lt;link rel=<span class="string">"stylesheet"</span> href=<span class="string">"https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"</span>&gt;</span><br><span class="line">  &lt;div class=<span class="string">"animated bounce"</span> id=<span class="string">"dowebok"</span>&gt;asdfasdfsd&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;h1 class=<span class="string">"animated bounce"</span>&gt;This is a h1&lt;/h1&gt;</span><br><span class="line">&lt;h1 class=<span class="string">"animated rubberBand"</span>&gt;This is a h1&lt;/h1&gt;</span><br><span class="line">最新版使用教程 4.0</span><br><span class="line">&lt;h1 class=<span class="string">"animate__animated animate__slideOutRight"</span> id=<span class="string">"dowebok"</span>&gt;this is a h1&lt;/h1&gt;</span><br><span class="line">&lt;h1 class=<span class="string">"animate__animated animate__bounce"</span>&gt;An animated element&lt;/h1&gt;</span><br></pre></td></tr></table></figure>

<p><a href="https://animate.style/" target="_blank" rel="noopener">Animate.css</a></p>
<p>给元素加上 class 后，刷新页面，就能看到动画效果了。animated 类似于全局变量，它定义了动画的持续时间；bounce 是动画具体的动画效果的名称，你可以选择任意的效果。</p>
<p><code>如果动画是无限播放的，可以添加 class infinite。</code></p>
<p>你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">'#dowebok'</span>).addClass(<span class="string">'animated bounce'</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">'#dowebok'</span>).addClass(<span class="string">'animated bounce'</span>);</span><br><span class="line">    setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        $(<span class="string">'#dowebok'</span>).removeClass(<span class="string">'bounce'</span>);</span><br><span class="line">    &#125;, <span class="number">1000</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#dowebok</span> &#123;</span><br><span class="line">    animate-duration: 2s;    //动画持续时间</span><br><span class="line">    animate-delay: 1s;    //动画延迟时间</span><br><span class="line">    animate-iteration-count: 2;    //动画执行次数</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="Anime-js"><a href="#Anime-js" class="headerlink" title="Anime.js"></a>Anime.js</h2><p><a href="https://github.com/juliangarnier/anime/" target="_blank" rel="noopener">juliangarnier/anime: JavaScript animation engine</a></p>
<ul>
<li>21084 ★</li>
<li>支持 CSS，DOM，SVG，和JS对象</li>
<li>点击Documentation，查看animejs的动效组件说明文档；点击Codepen，进入anime的动效库，查看可编辑的动效演示和示例。</li>
<li>将动画加持在LOGO、按钮、图像等各种各样的元素上。它支持各种常见的触发机制，比如点击、悬停、滑动，你可以借助它定义一系列的动画。</li>
<li>缺少自定义特效</li>
<li>作为Three JS的潜在替代方案</li>
</ul>
<h3 id="Download"><a href="#Download" class="headerlink" title="Download"></a>Download</h3><p>Via npm</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install animejs --save</span><br></pre></td></tr></table></figure>

<p>or manual <a href="https://github.com/juliangarnier/anime/archive/master.zip" target="_blank" rel="noopener">download</a>.</p>
<h3 id="Usage"><a href="#Usage" class="headerlink" title="Usage"></a>Usage</h3><h4 id="ES6-modules"><a href="#ES6-modules" class="headerlink" title="ES6 modules"></a>ES6 modules</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">import anime from &#39;animejs&#x2F;lib&#x2F;anime.es.js&#39;;</span><br></pre></td></tr></table></figure>

<h4 id="CommonJS"><a href="#CommonJS" class="headerlink" title="CommonJS"></a>CommonJS</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">const anime &#x3D; require(&#39;animejs&#39;);</span><br></pre></td></tr></table></figure>

<h4 id="File-include"><a href="#File-include" class="headerlink" title="File include"></a>File include</h4><p>Link <code>anime.min.js</code> in your HTML :</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src&#x3D;&quot;anime.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>



<h2 id="Hover-css"><a href="#Hover-css" class="headerlink" title="Hover.css"></a>Hover.css</h2><ul>
<li>20544 ★</li>
<li>鼠标悬浮效果。提供了大量的Hover效果，包括2D变换，图标变换，背景变换等等。而且几乎可以应用于所有元素，包括链接，按钮，logo，SVG甚至图片等等。</li>
<li>文件大小：104.2 kB.</li>
</ul>
<p><a href="https://github.com/IanLunn/Hover/" target="_blank" rel="noopener">IanLunn/Hover: A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.</a></p>
<p>安装</p>
<p>CDN</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">media</span>=<span class="string">"all"</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>NPM: <code>npm install hover.css --save</code></li>
<li>Bower: <code>bower install hover --save</code></li>
</ul>
<p>使用教程</p>
<p>类名</p>
<p><a href="http://ianlunn.github.io/Hover/" target="_blank" rel="noopener">Hover.css - A collection of CSS3 powered hover effects</a></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button hvr-box-shadow-outset"</span>&gt;</span>Checkout<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">//将上面文档的类名 Wobble To Bottom Right 改为 hvr-wobble-to-bottom-right 首字母小写添加 - 和 hvr- 前缀</span><br><span class="line">// 或者查看网页源代码直接复制</span><br><span class="line">.button &#123;</span><br><span class="line">    display: inline-block;</span><br><span class="line">    padding: 1em;</span><br><span class="line">    background-color: #79BD9A;</span><br><span class="line">    text-decoration: none;</span><br><span class="line">    color: white;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="Velocity-js"><a href="#Velocity-js" class="headerlink" title="Velocity.js"></a><a href="https://github.com/julianshapiro/velocity" target="_blank" rel="noopener">Velocity.js</a></h3><ul>
<li>14692 ★</li>
<li>一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，且不依赖 jQuery。</li>
<li>支持原生js，jq，react写法，作为vue粉，失望的是，<strong>暂时没有vue相关的插件</strong></li>
<li>文件大小：34.8 kB.</li>
</ul>
<h3 id="Three-JS"><a href="#Three-JS" class="headerlink" title="Three JS"></a><a href="https://github.com/mrdoob/three.js" target="_blank" rel="noopener">Three JS</a></h3><ul>
<li>42569 ★</li>
</ul>
<h3 id="WOW-js"><a href="#WOW-js" class="headerlink" title="WOW.js"></a><a href="https://www.delac.io/wow/" target="_blank" rel="noopener">WOW.js</a></h3><ul>
<li><a href="https://github.com/matthieua/WOW" target="_blank" rel="noopener">8760 ★</a></li>
<li>一款帮助你实现滚动页面时触发 CSS 动画效果的插件</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;cdn.bootcdn.net&#x2F;ajax&#x2F;libs&#x2F;wow&#x2F;1.1.2&#x2F;wow.js&quot;&gt;&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>



<ul>
<li>Bower</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">bower install wowjs</span><br></pre></td></tr></table></figure>

<ul>
<li>NPM</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install wowjs</span><br></pre></td></tr></table></figure>

<p>使用</p>
<p><a href="https://www.delac.io/wow/" target="_blank" rel="noopener">Reveal Animations When Scrolling — WOW.js</a></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">查看源代码更改类名</span><br><span class="line">&lt;div data-wow-iteration&#x3D;&quot;2&quot; class&#x3D;&quot;span3 wow swing center&quot; style&#x3D;&quot;visibility: visible; animation-iteration-count: 2; animation-name: swing;&quot;&gt;	&lt;img src&#x3D;&quot;img&#x2F;wow-6.gif&quot; height&#x3D;&quot;200&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">  &lt;script src&#x3D;&quot;https:&#x2F;&#x2F;cdn.bootcdn.net&#x2F;ajax&#x2F;libs&#x2F;wow&#x2F;1.1.2&#x2F;wow.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        new WOW().init();</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>



<h3 id="Basic-usage"><a href="#Basic-usage" class="headerlink" title="Basic usage"></a>Basic usage</h3><p>In order to hide all elements when they are supposed to be hidden. (Anti Flickering)</p>
<ul>
<li>CSS .wow { visibility: hidden; }</li>
<li>HTML</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;section class&#x3D;&quot;wow slideInLeft&quot;&gt;&lt;&#x2F;section&gt;</span><br><span class="line">&lt;section class&#x3D;&quot;wow slideInRight&quot;&gt;&lt;&#x2F;section&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>JavaScript</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">new WOW().init();</span><br></pre></td></tr></table></figure>

<h3 id="Advanced-usage"><a href="#Advanced-usage" class="headerlink" title="Advanced usage"></a>Advanced usage</h3><ul>
<li>HTML</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;section class&#x3D;&quot;wow slideInLeft&quot; data-wow-duration&#x3D;&quot;2s&quot; data-wow-delay&#x3D;&quot;5s&quot;&gt;&lt;&#x2F;section&gt;</span><br><span class="line">&lt;section class&#x3D;&quot;wow slideInRight&quot; data-wow-offset&#x3D;&quot;10&quot;  data-wow-iteration&#x3D;&quot;10&quot;&gt;&lt;&#x2F;section&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>JavaScript</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">var wow &#x3D; new WOW(</span><br><span class="line">  &#123;</span><br><span class="line">    boxClass:     &#39;wow&#39;,      &#x2F;&#x2F; animated element css class (default is wow)</span><br><span class="line">    animateClass: &#39;animated&#39;, &#x2F;&#x2F; animation css class (default is animated)</span><br><span class="line">    offset:       0,          &#x2F;&#x2F; distance to the element when triggering the animation (default is 0)</span><br><span class="line">    mobile:       true,       &#x2F;&#x2F; trigger animations on mobile devices (default is true)</span><br><span class="line">    live:         true,       &#x2F;&#x2F; act on asynchronously loaded content (default is true)</span><br><span class="line">    callback:     function(box) &#123;</span><br><span class="line">      &#x2F;&#x2F; the callback is fired every time an animation is started</span><br><span class="line">      &#x2F;&#x2F; the argument that is passed in is the DOM node being animated</span><br><span class="line">    &#125;,</span><br><span class="line">    scrollContainer: null &#x2F;&#x2F; optional scroll container selector, otherwise use window</span><br><span class="line">  &#125;</span><br><span class="line">);</span><br><span class="line">wow.init();</span><br></pre></td></tr></table></figure>





<h3 id="tilt-js"><a href="#tilt-js" class="headerlink" title="tilt.js"></a><a href="http://gijsroge.github.io/tilt.js/" target="_blank" rel="noopener">tilt.js</a></h3><ul>
<li><a href="https://github.com/gijsroge/tilt.js" target="_blank" rel="noopener">2405 ★</a></li>
<li>能够产生令人着迷的倾斜视差效果，相当于是在2D的界面中模拟出3D的倾斜效果。</li>
</ul>
<p><a href="https://github.com/gijsroge/tilt.js" target="_blank" rel="noopener">gijsroge/tilt.js: A tiny 60+fps parallax tilt hover effect for jQuery.</a></p>
<h3 id="scrollreveal-js"><a href="#scrollreveal-js" class="headerlink" title="scrollreveal.js"></a><a href="https://scrollrevealjs.org/" target="_blank" rel="noopener">scrollreveal.js</a></h3><ul>
<li>15499 ★</li>
<li>一款特定动画的JavaScript库</li>
<li>非常酷炫的进场效果。</li>
<li>创建十分酷炫的滚动特效，是一个轻量级的工具（没有任何依赖）</li>
<li>适用于DOM节点，多个容器，异步内容，并且支持3D旋转。ScrollReveal JS可能是创建滚动特效最好用的工具，它支持大量的浏览器，只要它们支持CSS Transform和CSS Transition特性。</li>
</ul>
<h3 id="Flutter"><a href="#Flutter" class="headerlink" title="Flutter"></a>Flutter</h3><p>官网:<a href="https://links.jianshu.com/go?to=https%3A%2F%2Fflutterchina.club%2F" target="_blank" rel="noopener">https://flutterchina.club/</a><br>Github: <a href="https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fflutter%2Fflutter" target="_blank" rel="noopener">https://github.com/flutter/flutter</a></p>
<h4 id="Element"><a href="#Element" class="headerlink" title="Element"></a>Element</h4><p>网站链接：<a href="http://element-cn.eleme.io/#/zh-CN" target="_blank" rel="noopener">http://element-cn.eleme.io/#/zh-CN</a></p>
<h4 id="WeUI"><a href="#WeUI" class="headerlink" title="WeUI"></a>WeUI</h4><p>网站链接：<a href="https://weui.io/" target="_blank" rel="noopener">https://weui.io/</a></p>
<p>Mint UI 早就停止更新了，虽然可以用，但是遇到坑就麻烦了。<br>① Antd 作为国内 UI 老大哥，居然没有！！！<br>②Element 明显 比 IVIEW 受欢迎，排在后面。。。<br>③Vant UI 明显比 cube-ui 受欢迎，也排后面。。。</p>
<h3 id="Flutter-1"><a href="#Flutter-1" class="headerlink" title="Flutter"></a>Flutter</h3><p>官网:<a href="https://links.jianshu.com/go?to=https%3A%2F%2Fflutterchina.club%2F" target="_blank" rel="noopener">https://flutterchina.club/</a><br>Github: <a href="https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fflutter%2Fflutter" target="_blank" rel="noopener">https://github.com/flutter/flutter</a></p>

    </div>

    
    
    
        <div class="reward-container">
  <div></div>
  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
    打赏
  </button>
  <div id="qr" style="display: none;">
      
      <div style="display: inline-block;">
        <img src="/images/wechatpay.jpg" alt="heweiliang 微信支付">
        <p>微信支付</p>
      </div>
      
      <div style="display: inline-block;">
        <img src="/images/alipay.jpg" alt="heweiliang 支付宝">
        <p>支付宝</p>
      </div>

  </div>
</div>

        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/atom.xml">
            <span class="icon">
              <i class="fa fa-rss"></i>
            </span>

            <span class="label">RSS</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/06/25/%E5%89%8D%E7%AB%AF/element/" rel="prev" title="element">
      <i class="fa fa-chevron-left"></i> element
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/06/25/%E5%89%8D%E7%AB%AF/Vue+React+Angular/Vue/Vue%E6%A1%88%E4%BE%8B/" rel="next" title="前端/Vue+React+Angular/Vue/Vue案例">
      前端/Vue+React+Angular/Vue/Vue案例 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    
  <div class="comments">
    <div id="lv-container" data-id="city" data-uid="MTAyMC81MDY1MC8yNzEzMw=="></div>
  </div>
  

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-动画的基础知识-transition-transform-animation"><span class="nav-number">1.</span> <span class="nav-text">CSS 动画的基础知识  transition + transform + animation</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#transition-首尾两个状态-两个帧"><span class="nav-number">1.1.</span> <span class="nav-text">transition 首尾两个状态 两个帧</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#transform"><span class="nav-number">1.2.</span> <span class="nav-text">transform</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#animation-定义任意多的关-键帧-keyframe"><span class="nav-number">1.3.</span> <span class="nav-text">animation 定义任意多的关 键帧 + @keyframe</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#GitHub的README-md的svg图标"><span class="nav-number">2.</span> <span class="nav-text">GitHub的README.md的svg图标</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Animate-css"><span class="nav-number">3.</span> <span class="nav-text">Animate.css</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#安装教程"><span class="nav-number">3.1.</span> <span class="nav-text">安装教程</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#CDN"><span class="nav-number">3.1.1.</span> <span class="nav-text">CDN</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Installation"><span class="nav-number">3.1.2.</span> <span class="nav-text">Installation</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Anime-js"><span class="nav-number">4.</span> <span class="nav-text">Anime.js</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Download"><span class="nav-number">4.1.</span> <span class="nav-text">Download</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Usage"><span class="nav-number">4.2.</span> <span class="nav-text">Usage</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#ES6-modules"><span class="nav-number">4.2.1.</span> <span class="nav-text">ES6 modules</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#CommonJS"><span class="nav-number">4.2.2.</span> <span class="nav-text">CommonJS</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#File-include"><span class="nav-number">4.2.3.</span> <span class="nav-text">File include</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Hover-css"><span class="nav-number">5.</span> <span class="nav-text">Hover.css</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Velocity-js"><span class="nav-number">5.1.</span> <span class="nav-text">Velocity.js</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Three-JS"><span class="nav-number">5.2.</span> <span class="nav-text">Three JS</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#WOW-js"><span class="nav-number">5.3.</span> <span class="nav-text">WOW.js</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Basic-usage"><span class="nav-number">5.4.</span> <span class="nav-text">Basic usage</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Advanced-usage"><span class="nav-number">5.5.</span> <span class="nav-text">Advanced usage</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#tilt-js"><span class="nav-number">5.6.</span> <span class="nav-text">tilt.js</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#scrollreveal-js"><span class="nav-number">5.7.</span> <span class="nav-text">scrollreveal.js</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Flutter"><span class="nav-number">5.8.</span> <span class="nav-text">Flutter</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Element"><span class="nav-number">5.8.1.</span> <span class="nav-text">Element</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#WeUI"><span class="nav-number">5.8.2.</span> <span class="nav-text">WeUI</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Flutter-1"><span class="nav-number">5.9.</span> <span class="nav-text">Flutter</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="heweiliang"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">heweiliang</p>
  <div class="site-description" itemprop="description">heweiliang blog</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">96</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">18</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">24</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/yourname" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:yourname@gmail.com" title="E-Mail → mailto:yourname@gmail.com" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="https://plus.google.com/yourname" title="Google → https:&#x2F;&#x2F;plus.google.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-google"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="https://stackoverflow.com/yourname" title="StackOverflow → https:&#x2F;&#x2F;stackoverflow.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i></a>
      </span>
  </div>
  <div class="cc-license motion-element" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title">
      <i class="fa fa-fw fa-link"></i>
      Links
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title2</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title3</a>
        </li>
    </ul>
  </div>

      </div>
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">heweiliang</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    <span title="站点总字数">376k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">5:42</span>
</div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>


  <script defer src="/lib/three/three.min.js"></script>
    <script defer src="/lib/three/three-waves.min.js"></script>
    <script defer src="/lib/three/canvas_lines.min.js"></script>


  




  
<script src="/js/local-search.js"></script>













  

  

<script>
NexT.utils.loadComments(document.querySelector('#lv-container'), () => {
  window.livereOptions = {
    refer: location.pathname.replace(CONFIG.root, '').replace('index.html', '')
  };
  (function(d, s) {
    var j, e = d.getElementsByTagName(s)[0];
    if (typeof LivereTower === 'function') { return; }
    j = d.createElement(s);
    j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
    j.async = true;
    e.parentNode.insertBefore(j, e);
  })(document, 'script');
});
</script>

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/Epsilon2.1.model.json"},"display":{"position":"left","width":300,"height":600},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>
